<template>
  <div class="absolute top-32 left-0 z-50">
    <n-button @click="handleSwitch" round
              class="transition-all transition-500 -translate-x-1/2"
              style="padding-right: 10px; padding-left: 35px"
              secondary>
      <TextIcon v-if="postShowMode==='grid'" icon="ion:list-sharp" tip="列表"></TextIcon>
      <TextIcon v-if="postShowMode==='list'" icon="mdi:grid" tip="宫格"></TextIcon>
    </n-button>
  </div>
</template>

<script setup lang="ts">

import TextIcon from "@/components/pc/icon/TextIcon.vue";
import {useAppStore} from "@/store";
import {storeToRefs} from "pinia";

const {postShowMode} = storeToRefs(useAppStore())

const handleSwitch=()=>{
  postShowMode.value=postShowMode.value==='list'?'grid':'list'
}

</script>

<style scoped>


</style>